<template>
	<view class="mescroll-empty" :class="{ 'empty-fixed': option.fixed }"
		:style="{'z-index': option.zIndex, top: option.top}">
		<view>
			<image v-if="icon" class="empty-icon" :src="icon" mode="widthFix" />
		</view>
		<view v-if="tip" class="empty-tip">{{ tip }}</view>
		<view v-if="btnText" class="empty-btn" @click="emptyClick">{{ btnText }}</view>
	</view>
</template>

<script>
	export default {
		props: {
			// empty的配置项: 默认为GlobalOption.up.empty
			option: {
				type: Object,
				default () {
					return {};
				}
			}
		},
		// 使用computed获取配置,用于支持option的动态配置
		computed: {

			icon() {
				return this.option.icon
			},

			tip() {
				return this.option.tip
			},
			// 按钮文本
			btnText() {
				return this.option.btnText
			}
		},
		methods: {
			// 点击按钮
			emptyClick() {
				this.$emit('emptyclick');
			}
		}
	};
</script>

<style lang="scss">
	.mescroll-empty {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		width: 100%;
		height: 100vh;
		justify-content: center;
		text-align: center;

		.empty-icon {
			width: 280rpx;
			height: 280rpx;
		}
		
		.empty-tip {
			margin-top: 20rpx;
			font-size: 24rpx;
			color: gray;
		}
		
		.empty-btn {
			display: inline-block;
			margin-top: 40rpx;
			min-width: 200rpx;
			padding: 18rpx;
			font-size: 28rpx;
			border: 1rpx solid #e04b28;
			border-radius: 60rpx;
			color: #e04b28;
		}
	}

</style>